<template>
  <div class="header-title">
    <slot>
      <div v-if="isDetail" class="header-title-text">
        <!-- <span>{{ title }}</span>
        <span class="separator">/</span>
        <span>详情</span>-->
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="linkPath">{{ title }}</el-breadcrumb-item>
          <el-breadcrumb-item>详情</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <h1 v-else class="header-title-text">
        <span v-if="title">{{ title }}</span>
        <span v-else>{{ $route.meta?.title }}</span>
      </h1>
    </slot>

    <slot name="right"></slot>
  </div>
</template>

<script lang="ts">
export default defineComponent({
  name: 'HeaderTitle',
})
</script>

<script lang="ts" setup>
import { defineComponent, defineProps } from 'vue'

defineProps({
  title: {
    type: String,
    default: '',
  },
  isDetail: {
    type: Boolean,
    default: false,
  },
  linkPath: {
    type: String,
    default: '/',
  },
})
</script>

<style lang="scss" scoped>
.header-title {
  display: flex;
  height: 60px;
  padding: 0 20px;
  border-bottom: 1px solid var(--table-border);
  justify-content: space-between;
  align-items: center;

  &-text {
    font-size: 18px;
    font-weight: normal;
    color: var(--color-1);
  }
}

.separator {
  margin: 0 5px;
}

.el-breadcrumb {
  font-size: 22px;

  &__item {
    &.is-link {
      cursor: pointer;

      &:hover {
        :deep(.el-breadcrumb__inner) {
          color: var(--color-primary);
        }
      }
    }
  }
}
</style>
